<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
      lang="pt-br" 
      xml:lang="pt-br"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <h:head>
        <title>Base de Conhecimento</title>

        <link rel="shortcut icon" href="imagens/B.ico" type="image/x-icon" />

        <style type="text/css">  
            .ui-widget {  
                font-size: 12px !important;  
            }  
        </style> 

        <script language="JavaScript"> 
           function limpa() {
             document.getElementById('FormConhecimento:referencia').value = '';
             document.getElementById('FormConhecimento:fato').value = '';
             document.getElementById('FormConhecimento:esclarecimento').value = '';                          
           }
        </script>
    </h:head>

    <h:body style="font-family: Arial; background-image: url('imagens/parede.jpg')">
        <center>

            <p:panel>
                <h:graphicImage value="imagens/cadastro_2.jpg" style="width: 30%;" /> 
            </p:panel>

            <br/>

            <f:view contentType="text/html">

                <h:form id="FormConhecimento">   
                    <h:panelGrid columns="2">
                        <p:panel id="panel" style="background-image: url('imagens/parede.jpg')">
                            <h:outputLabel value="Analista"/>
                            <p:spacer width="10"/>

                            <h:selectOneMenu value="#{conhecimentoControl.idAnalista}">
                                <f:selectItems value="#{conhecimentoControl.analistas}"/>
                            </h:selectOneMenu>

                            <br/>
                            <br/>

                            <h:outputLabel value="Referência"/>       
                            <p:spacer width="10"/>
                            <p:inputText id="referencia" value="#{conhecimentoControl.referencia}" size="100"/>

                            <br/>
                            <br/>

                            <h:outputLabel value="Fato"/>

                            <p:inputTextarea id="fato" value="#{conhecimentoControl.fato}" maxHeight="500" cols="100" rows="5"/>

                            <br/>

                            <h:outputLabel value="Esclarecimento"/>

                            <p:inputTextarea id="esclarecimento" value="#{conhecimentoControl.esclarecimento}" maxHeight="1000" cols="100" rows="5"/>

                            <br/>

                            <p:panel header="Tags - Palavras Chaves" style="width: 500px">  
                                <h:panelGrid columns="5" id="grid">  
                                    <h:outputLabel value="Tag : *" for="txt_title"></h:outputLabel>  
                                    <p:inputText id="txt_title" style="width: 250px"   
                                                 value="#{conhecimentoControl.tag.nome}"/>  


                                    <p:commandButton value="Adicionar"  
                                                     action="#{conhecimentoControl.NovaTag}"
                                                     update="montaTag @parent" >  
                                        <p:collector value="#{conhecimentoControl.tag}"   
                                                     addTo="#{conhecimentoControl.listaTags}"/>  
                                    </p:commandButton>  
                                    <p:commandButton value="Limpar" type="reset"/> 
                                </h:panelGrid>  
                            </p:panel> 

                            <p:ajaxStatus style="width:16px;height:16px;">  
                                <f:facet name="start">  
                                    <h:graphicImage value="imagens/img_Ajax_loading.gif"/>  
                                </f:facet>  

                                <f:facet name="complete">  
                                    <h:outputText value="" />  
                                </f:facet>  
                            </p:ajaxStatus>  

                            <p:outputPanel id="montaTag">  
                                <p:dataTable value="#{conhecimentoControl.listaTags}" var="tabela" emptyMessage="Vázio" style="width: 300px">  

                                    <p:column>  
                                        <f:facet name="header">  
                                            <h:outputText value="Nome Tag"/>  
                                        </f:facet>  
                                        <h:outputText value="#{tabela.nome}" />  
                                    </p:column>  

                                    <p:column>  
                                        <f:facet name="header">  
                                            <h:outputText value="Operação" />  
                                        </f:facet>  
                                        <p:commandLink value="Remover" update="FormConhecimento:montaTag" process="@this">  
                                            <p:collector value="#{tabela}"  
                                                         removeFrom="#{conhecimentoControl.listaTags}" />  
                                        </p:commandLink>  
                                    </p:column>  

                                </p:dataTable>  
                            </p:outputPanel>  

                            <br/>

                            <center>
                                <p:commandButton value="Gravar"
                                                 actionListener="#{conhecimentoControl.validaNovoConhecimento}"
                                                 title="Gravar novo conhecimento"
                                                 update="msgs"
                                                 oncomplete="limpa();"/>

                                <p:commandButton id="btnLimpar"
                                                 value="Limpar"
                                                 type="reset"
                                                 title="Limpar todos os campos"/>

                                <p:commandButton value="Sair"
                                                 action="index.xhtml" 
                                                 ajax="false"
                                                 title="Voltar para pagina inicial"/>
                            </center>
                        </p:panel>
                    </h:panelGrid>   

                    <p:messages id="msgs" showDetail="true"/>  

                </h:form>
            </f:view>
        </center>
    </h:body>
</html>
